import React, { Component, createRef } from 'react'

export default class App extends Component {
  constructor(...args) {
    super(...args)
    console.log('#1 constructor')
    // 一般初始化数据和创建 ref 引用
    this.state = {
      age: 18,
    }
    this.divRef = createRef()
  }
  render() {
    console.log('#2 redner')
    // !render 一定不要直接调用 setState
    // this.setState({ age: 19 })
    return (
      <div
        className='app'
        ref={this.divRef}
        onClick={() => {
          this.setState({
            age: 19,
          })
        }}
      >
        App <span>{this.state.age}</span>
      </div>
    )
  }
  componentDidMount() {
    // 发请求
    // 获取 DOM
    console.log(document.querySelector('.app').innerHTML)
    console.log('#3 componentDidMount')
  }
  componentDidUpdate() {
    console.log('componentDidUpdate')
    console.log(document.querySelector('span').innerHTML)
  }
}
